/**
 * 组合
 *
 *   1. 在React中不推荐我们自己写一个基类，然后继承这个基类来实现代码的重用
 *   2. 推荐的是组合操作
 *
 * 思考
 *    1. 有一个 Sidebar 组件用于展示侧边栏，这个组件中的内容应该写死在 Sidebar 里面嘛？
 *    2. 有一个 Dialog 组件用于展示弹窗，这个组件中的内容应该写死嘛？Modal
 *    3. vue 中 slot
 *
 *
 *
 * 实现一个 Modal 组件
 *    1. 做组件主要思考三点
 *        1. 入参       props
 *        2. 出参       组件内提供的一些函数
 *        3. 自己的状态  组件内私有的state数据
 *
 *    2. 调用组件时写在开始标签与结束标签中的内容，默认是不会渲染出来的。
 *        1. vue 中，需要在组件内部定义 slot 才行
 *        2. react 中，写在组件开始标签与结束标签中的内容也是一个 prop 叫 children。在组件内使用上这个 children 的 prop 即可
 *    3. vue 中 slot 可以写多个，React 如何处理呢
 *        1. 传递props
 *    4. vue 中 作用域插槽，React 如何处理呢
 */
import React from "react";
import ReactDOM from "react-dom/client";

import Modal from "./components/Modal";

class App extends React.Component {
  state = {
    show: false,
    name: "App",
  };

  showModal = () => {
    this.setState({
      show: true,
    });
  };

  onClose = () => {
    console.log("App - onClose", this);
    this.setState({
      show: false,
    });
  };

  render() {
    const { show } = this.state;
    return (
      <div>
        <h1>App</h1>

        <button onClick={this.showModal}>显示Modal</button>

        {/* <Modal
          children={<button>我的天</button>}
          footer={<h1>底部</h1>}
        ></Modal> */}

        {/* <Modal visible={show} onClose={this.onClose}>
          <button>我的天 = {this.state.name}</button>
        </Modal> */}

        {/* 
          如果要实现作用域插槽的功能的话，如何做 
          1. 传递一个函数给组件，组件内部调用这个函数，且传递参数过来
        */}
        <Modal visible={show} onClose={this.onClose}>
          {(aaaa) => {
            return (
              <button>
                我的天 = {this.state.name} = {aaaa}
              </button>
            );
          }}
        </Modal>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
